<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/8/12
  Time: 11:34
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品列表</title>
    <link rel="stylesheet" href="/static/css/reset.css">
    <%--layui css--%>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        #content {
            width: 1190px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #content .list-wrapper{
            display: flex;
            width: 1190px;
            /*height: 3000px;*/
            flex-wrap: wrap;
            justify-content: center;
            /*flex-direction: column;*/
            /*justify-content: center;*/
        }

        #content .list-wrapper .list-item{
            background-color: rgba(0, 0, 0, 0.15);
            border-radius: 10px;
            margin: 12px 10px;
            display: block;
            align-items: center;
            width: 220px;
            height: 300px;
            justify-content: center;
            user-select: none;
            cursor: pointer;
        }

        #content .list-wrapper .list-item .img-wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0 0 0;
            /*width: 200px;*/
            height: 200px;

        }

        #content .list-wrapper .list-item .img-wrapper .activePath{
            width: 150px;
            height: 150px;
            border-radius: 5px;
        }

        #content .list-wrapper .list-item .price-wrapper{
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            color: red;
            height: 30px;
            line-height: 30px;
            margin: 0 0 10px 0;
        }
        #content .list-wrapper .list-item .title-wrapper{
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            height: 25px;
            line-height: 25px;
            user-select: none;
        }
        .list-item:hover{
            transition-duration: 800ms;
            transform: translate(0,-10px);
        }

    </style>
</head>
<body>

<jsp:include page="search.jsp"/>
<div id="content">
    <div class="list-wrapper">
        <c:forEach items="${list}" var="item">
            <a href="/api/good/selectById?gid=${item.gid}">
                <div class="list-item">
                    <div class="img-wrapper">

                        <img class="activePath" src="${item.activePath}" alt="">

                    </div>
                    <div class="price-wrapper">
                            ${item.price}
                    </div>
                    <div class="title-wrapper">
                        <p class="title">${item.title}</p>
                    </div>
                </div>
            </a>
        </c:forEach>
    </div>
</div>
</body>
</html>